<template>
  <div class="content-box" v-loading="!dataLoaded">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">组织机构</div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :zNodes="zNodes" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">梯控点列表</div>
        </div>
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="梯控点信息"
            rowKey="doorsn"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :tool-button="false"
            :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
            v-if="areaSelList.length"
          >
            <template #tableHeader="scope">
              <el-button type="primary" text :icon="CopyDocument" @click="dialogVisible1 = true">复制权限</el-button>
              <el-button type="primary" text :icon="CirclePlus" @click="openDialog">增加</el-button>
              <el-button type="danger" text :icon="Delete" @click="_batchDel(scope.selectedListIds)">删除</el-button>
            </template>
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
          </ProTable>
        </div>
      </div>
    </div>
    <DoorDialog
      :dialogVisible="dialogVisible"
      :handleClose="handleClose"
      :submitCallback="_submitAccessContorl"
      :deptId="deptId"
      :areaSelList="areaSelList"
    />
    <TreeDialog :zNodes="zNodes" :dialogVisible="dialogVisible1" :handleClose="handleClose" :submitCallback="_submitDpt" />
  </div>
</template>

<script setup lang="tsx" name="department">
/* eslint-disable */
// @ts-nocheck
import { onMounted, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import DoorDialog from "./components/DoorDialog.vue";
import TreeDialog from "./components/TreeDialog.vue";
import { CopyDocument, CirclePlus, Delete } from "@element-plus/icons-vue";

import {
  getAccessList,
  getAreaSelList,
  delAccess,
  addAccess,
  copyDptAccess
} from "@/api/modules/elevatorControl/empower/department";
import { getOrgTree } from "@/api/modules/common";
import { ElMessage, ElMessageBox } from "element-plus";

const treeId = ref("tree");
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const dataLoaded = ref(false);

const loading = ref(false);
const proTable = ref();
const columns: any = ref([]);
const curEmployee: any = ref({});
const zNodes: any = ref([]);
const areaSelList = ref([]);
const deptId = ref("");

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records || [],
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getAccessList({
    ...newParams,
    deptId: deptId.value,
    doorType: 1
  });
};

const _batchDel = async (selectedListIds: string[]) => {
  if (!selectedListIds.length) {
    ElMessage.error("请选择人员");
    return false;
  }
  ElMessageBox.confirm(`是否删除所选人员?`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  }).then(async () => {
    try {
      const res = await delAccess({ list: selectedListIds, stringParam1: deptId.value });
      const { v1, v2 } = res.data;
      ElMessage.success(`删除成功：${v1},失败：${v2}`);

      proTable.value.clearSelection();
      proTable.value.getTableList();
    } catch (error) {
      console.log(error);
    }
  });
};

const _submitAccessContorl = async (ids: string[]) => {
  try {
    const res = await addAccess({
      stringParam1: deptId.value,
      list: ids
    });
    const { v1, v2 } = res.data;
    dialogVisible.value = false;
    ElMessage.success(`增加成功：${v1},失败：${v2}`);
    proTable.value.clearSelection();
    proTable.value.reset();
  } catch (error) {
    console.log(error);
  }
};

const _submitDpt = async id => {
  dialogVisible1.value = false;
  try {
    const res = await copyDptAccess({ dptIdSrc: deptId.value, dptIdDes: id, doorType: 1 });
    ElMessage.success("复制成功");
    proTable.value.clearSelection();
    proTable.value.reset();
  } catch (error) {
    console.log(error);
  }
};

/**
 * 增加房间弹窗
 */
const openDialog = () => {
  dialogVisible.value = true;
};

/**
 * 关闭弹窗
 */
const handleClose = () => {
  dialogVisible.value = false;
  dialogVisible1.value = false;
};

/**
 * 获取区域选择下拉列表
 */
const getAearSelData = async () => {
  try {
    const res = await getAreaSelList();
    areaSelList.value = res.data;
    areaSelList.value.unshift({
      key: "",
      value: "全部"
    });
    areaSelList.value = areaSelList.value.map(item => {
      return {
        ...item,
        label: item.value,
        value: item.key
      };
    });
    columns.value = [
      { type: "selection", fixed: "left", width: 60 },
      // {
      //   prop: "areaId",
      //   label: "区域",
      //   isShow: false,
      //   enum: areaSelList.value,
      //   search: {
      //     el: "select",
      //     defaultValue: ""
      //   },
      //   minWidth: 120
      // },
      {
        prop: "clause",
        label: "描述",
        isShow: false,
        search: {
          el: "input"
        },
        minWidth: 120
      },
      {
        prop: "areaid",
        label: "区域",
        minWidth: 200,
        render: scope => {
          return areaSelList.value.find(item => item.key === scope.row.areaid).label;
        }
      },

      {
        prop: "doorsn",
        label: "梯控点编码",
        minWidth: 200
      },
      {
        prop: "doorName",
        label: "描述",
        minWidth: 200
      }
    ];
  } catch (error) {
    columns.value = [
      { type: "selection", fixed: "left", width: 60 },
      {
        prop: "clause",
        label: "描述",
        isShow: false,
        search: {
          el: "input"
        },
        minWidth: 120
      },
      {
        prop: "doorsn",
        label: "梯控点编码",
        minWidth: 200
      },
      {
        prop: "doorname",
        label: "描述",
        minWidth: 200
      }
    ];
    console.log(error);
  }
};
const getDeptTreeData = async () => {
  try {
    const res = await getOrgTree();
    zNodes.value = res.data;
    if (zNodes.value.length) {
      deptId.value = zNodes.value[0].id;
    }
  } catch (error) {
    console.log(error);
  }
};

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode }) {
  deptId.value = treeNode.id;
  loading.value = true;
  if (proTable.value) {
    proTable.value.clearSelection();
    proTable.value.reset();
  }
}

onMounted(async () => {
  Promise.all([getDeptTreeData()]).then(() => {
    dataLoaded.value = true;
    getAearSelData();
  });
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
